<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"	></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
	#login{
		width: 280px;
		height: 160px;
		position: absolute;
		top: 30%;
		left: 50%;
		margin-left: -200px;
		margin-top: -140px;
		border:solid 2px;
		padding: 60px 60px 40px 60px;
		border-radius: 8px;
	}

	.input{
		width: 200px;
		margin-bottom: 20px;
	}
	#button{
		margin-left: 180px;
	}
	</style>
</head>
<body>
	<div id="login">
		<b>用户名</b>
		<el-input placeholder="请输入内容" clearable class="input" v-model="username"></el-input>
		<b>密&nbsp;&nbsp;码</b>
		<el-input placeholder="请输入内容" clearable class="input" v-model="password"></el-input>
		<el-button v-on:click="postApiData" id="button">提交</el-button>
	</div>
</body>


<script>
    new Vue({
      el: '#login',
      data:{
         	username:"",
         	password:""
         },
         methods:{
             postApiData:function() {
                var url = "http://www.baidu.com";
                var username = this.username;
                var password = this.password;
                axios.post(url,{username,password}).then(function(res) {
                    var resData = res.data;
                    if(resData.status == "0") { //0表示成功，1表示失败    
                         alert(resData.message);
                    }else{
                         alert(resData.message);
                    } 
                 });
 
             }
         }

    })

  </script>
</html>